<template>
  <div class="app-container">
    <div class="container">
      <div class="container-header">
        <div class="container-header-left">
<!--          <el-card class="box-card">-->
<!--            <div slot="header" class="clearfix">-->
<!--              <span>当天天气监测</span>-->
<!--            </div>-->
<!--            <div class="consumption">-->
<!--              <div class="consumption-item">-->
<!--                <img-->
<!--                  class="consumption-item-img"-->
<!--                  src="@/assets/images/property/qiwen.jpg"-->
<!--                  alt=""-->
<!--                />-->
<!--                <div>-->
<!--                  <div class="consumption-item-title">气温</div>-->
<!--                  <div class="consumption-item-number">{{weatherData.temperature}}℃</div>-->
<!--                  &lt;!&ndash; <div class="consumption-item-number">{{weatherList.temp}}</div> &ndash;&gt;-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="consumption-item">-->
<!--                <img-->
<!--                  class="consumption-item-img"-->
<!--                  src="@/assets/images/property/tianqi.jpg"-->
<!--                  alt=""-->
<!--                />-->
<!--                <div>-->
<!--                  <div class="consumption-item-title">天气</div>-->
<!--                  <div class="consumption-item-number">{{weatherData.text}}</div>-->
<!--                  &lt;!&ndash; <div class="consumption-item-number">{{weatherList.text}}</div> &ndash;&gt;-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="consumption-item">-->
<!--                <img-->
<!--                  class="consumption-item-img"-->
<!--                  src="@/assets/images/property/zhiliang.jpg"-->
<!--                  alt=""-->
<!--                />-->
<!--                <div>-->
<!--                  <div class="consumption-item-title">风向</div>-->
<!--                  <div class="consumption-item-number">{{weatherData.wind_direction}}</div>-->
<!--                  &lt;!&ndash; <div class="consumption-item-number">{{category}}</div> &ndash;&gt;-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="consumption-item">-->
<!--                <img-->
<!--                  class="consumption-item-img"-->
<!--                  src="@/assets/images/property/shidu.jpg"-->
<!--                  alt=""-->
<!--                />-->
<!--                <div>-->
<!--                  <div class="consumption-item-title">湿度</div>-->
<!--                  <div class="consumption-item-number">{{weatherData.humidity}}</div>-->
<!--                  &lt;!&ndash; <div class="consumption-item-number">{{weatherList.humidity}}</div> &ndash;&gt;-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="consumption-item">-->
<!--                <img-->
<!--                  class="consumption-item-img"-->
<!--                  src="@/assets/images/property/fengli.jpg"-->
<!--                  alt=""-->
<!--                />-->
<!--                <div>-->
<!--                  <div class="consumption-item-title">风力</div>-->
<!--                  <div class="consumption-item-number">{{weatherData.wind_scale}}级</div>-->
<!--                  &lt;!&ndash; <div class="consumption-item-number">{{weatherList.windScale}}级</div> &ndash;&gt;-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-card>-->
<!--          <div class="main">-->
<!--            <el-card class="main_left">-->
<!--              <div class="main_right_search">-->
<!--                <div>二区垃圾统计图</div>-->
<!--                <div>-->

<!--                  <el-date-picker @change="onChange3()" v-model="data3_a" type="monthrange" align="right" unlink-panels-->
<!--                                  range-separator="至" start-placeholder="开始月份" format="yyyy 年 MM 月 dd 日" value-format="timestamp"-->
<!--                                  end-placeholder="结束月份" :picker-options="pickerOptions">-->
<!--                  </el-date-picker>-->


<!--                </div>-->

<!--              </div>-->
<!--              <div id="echarts3"></div>-->
<!--            </el-card>-->
<!--            <el-card class="main_right">-->
<!--              <div class="main_right_search">-->
<!--                <div>一区垃圾统计图</div>-->
<!--                <div> <el-date-picker @change="onChange4()" v-model="data4_a" type="monthrange" align="right" unlink-panels-->
<!--                                      range-separator="至" start-placeholder="开始月份" format="yyyy 年 MM 月 dd 日" value-format="timestamp"-->
<!--                                      end-placeholder="结束月份" :picker-options="pickerOptions">-->
<!--                </el-date-picker></div>-->

<!--              </div>-->
<!--              <div id="echarts4"></div>-->
<!--            </el-card>-->
<!--          </div>-->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>设备状态</span>
            </div>
            <div class="secure">
              <template v-for="item in deviceCountData">
                <div class="secure-item">
                  <img
                    class="secure-item-img"
                    src="@/assets/images/frontPage/NumberConsumers.jpg"
                    alt=""
                  />
                  <div>
                    <div class="secure-item-title">{{item.type}}</div>
                    <div class="secure-item-box">
                      <div class="secure-item-box-first">
                        <div class="secure-item-box-text">
                          <div class="circle"></div>
                          正常数量
                        </div>
                        <div class="secure-item-box-number" style="color: blue">{{item.count1}}</div>
                      </div>
                      <div>
                        <div class="secure-item-box-text">
                          <div class="redcircle"></div>
                          异常数量
                        </div>
                        <div class="secure-item-box-number" style="color: red">{{item.count2}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </el-card>
          <el-card class="box-card" style="margin-top: 10px">
            <div slot="header" class="card-title">
              <div>二区监测设备布局平面示意图</div>
            </div>
            <div style="display: flex;flex-flow: row;justify-content: center;align-items: center">
              <baidumap :shou-map-text="false" :point-data="deviceData" ></baidumap>
            </div>
          </el-card>
        </div>
        <div class="container-header-right">
          <el-card class="box-card container-header-right-box" style="margin-top: 0px">
            <div slot="header" class="clearfix">
              <span>设备监测记录</span>
            </div>
            <el-table stripe border :data="qiahaotableData" style="width: 100%;">
<!--              <el-table-column label="设备编号" align="center" prop="deviceId" min-width="170" />-->
              <el-table-column label="记录时间" align="center" prop="recordTime" min-width="160">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.recordTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="监测数值" align="center" prop="amount" width="80" />
              <el-table-column label="设备名称" align="center" prop="deviceName" min-width="170" />
            </el-table>
          </el-card>
          <el-card class="box-card" style="margin-top: 10px" v-loading="wasteLoad">
            <div slot="header" class="card-title">
              <div>
                <el-select v-model="chartType" @change="chartTypeChange">
                  <el-option label="一区垃圾各月份统计图" value="一区"></el-option>
                  <el-option label="二区垃圾各月份统计图" value="二区"></el-option>
                </el-select>
              </div>
              <div>
                <el-date-picker v-model="chartYear" value-format="yyyy" type="year" style="width: 100px" placeholder="选择年份" @change="getWasteData" :clearable="false">
                </el-date-picker>
              </div>
              <div>
                <el-button type="text"  icon="el-icon-download" size="mini" @click="rowExportAnbao()">导出</el-button>
              </div>
            </div>
            <div  id="chartBox" style="width:100%;height: 360px"></div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {today, getMonth, getWeather} from '@/api/property'
import {warningFiveList} from "@/api/device/warning";
import {energyFiveList} from "@/api/device/energy";
import {right} from "core-js/internals/array-reduce";
import moment from "moment";
import {deviceCountList, listAll} from "@/api/device/device";
import baidumap from "@/components/Baidumap/index.vue";

export default {
  components:{
    baidumap,
  },
  data() {
    return {
      qiahaoObj: {},
      sunObj: {},
      qiahaoChartStyle: { width: "100%", height: "300px" },
      sunChartStyle: { width: "100%", height: "300px" },
      weatherList: {},
      category: '',
      loading: true,
      suntableData: [],
      qiahaotableData: [],
      chartType:'一区',
      chartYear:'',
      leftYear:'',
      rightYear:'',
      weatherData:'',
      leftChartData:'',
      rightCharDate:'',
      deviceCountData:[],
      deviceData:[],
      wasteLChartData:[],
      wasteLoad:true,
    };
  },
  mounted() {

  },
  created() {
    this.chartYear=moment().format('YYYY')
    this.getTody()
    this.getAlllist()
    this.getDeviceCountList()
    this.getWasteData()

    // this.dateChange()
    // this.getWeather();
    // this.getWeather()
    // this.getLeftData()
    // this.getRightData()

  },
  methods: {
    //行导出
    rowExportAnbao(row){
      this.$router.push({
        path:'/jmreport/lajiData',
        query:{
          id:'928247800705888256',
        }
      })
    },
    chartTypeChange(){
      this.chartYear=moment().format('YYYY')
      this.getWasteData()
    },
    // dateChange(){
    //   if(this.chartType===1){
    //     this.getLeftData()
    //   }else if(this.chartType===2){
    //     this.getRightData()
    //   }
    // },
    //获取垃圾统计图
    getWasteData(){
      this.wasteLoad=true
      getMonth({location: this.chartType,year:this.chartYear}).then(res => {
        this.wasteLChartData=res.data
        this.wasteLoad=false
        this.wasteEcharts();
      });
    },
    //获取左边图表列表
    getLeftData(){

    },
    //获取右边图表列表
    getRightData(){
      getMonth({location: '二区',year:this.chartYear}).then(res => {
        this.rightCharDate=res.data
        this.suninitEchart();
      })
    },
    getWeather() {
      let that = this
      getWeather().then(res=>{
        if(res.data && res.data.results){
          this.weatherData=res.data.results[0].now
        }
      })
      // if ("geolocation" in navigator) {
      //   navigator.geolocation.getCurrentPosition(
      //     function (position) {
      //       // 处理成功获取位置的情况
      //       const latitude = position.coords.latitude; // 纬度
      //       const longitude = position.coords.longitude; // 经度
      //       console.log("纬度：" + latitude);
      //       console.log("经度：" + longitude);
      //       fetch(
      //         `https://devapi.qweather.com/v7/weather/now?location=${latitude.toFixed(2)},${longitude.toFixed(2)}&key=9559bd44b5704b49849b11a58a58a70e`,
      //         {
      //           type: "get",
      //           dataType: "json",
      //         }
      //       )
      //         .then((response) => {
      //           if (response.ok) return response.json();
      //         })
      //         .then((data) => {
      //           that.weatherList = data.now
      //           fetch(`https://api.qweather.com/v7/air/now?location=${latitude.toFixed(2)},${longitude.toFixed(2)}&key=9559bd44b5704b49849b11a58a58a70e`,
      //            {
      //             type: "get",
      //             dataType: "json",
      //            }
      //           ).then((response) => {
      //             if (response.ok) return response.json();
      //           }).then((data) => {
      //             console.log(data.now);
      //             that.category = data.now.category
      //           }).finally(() => {
      //             that.loading = false
      //           })
      //
      //         }).finally(() => {
      //           that.loading = false
      //         });
      //
      //     },
      //     function (error) {
      //       // 处理获取位置失败的情况
      //       console.error("获取位置失败：" + error.message);
      //       this.loading = false
      //     }
      //   );
      // }
    },
    getDeviceCountList(){
      deviceCountList().then(res=>{
        this.deviceCountData=res.data
      })
    },
    getTody() {
      warningFiveList().then(response => {
          this.suntableData = response.data
        }
      );
      energyFiveList().then(response => {
          this.qiahaotableData = response.data
        }
      );
    },
    getAlllist() {
      listAll().then(res=>{
        this.deviceData=res.rows
      })

    },
    wasteEcharts() {
      const seriesData=[]
      const colorList=['green',"blue","yellow","red"]
      this.wasteLChartData.keySeries.map((item,index)=>{
        const seriesItem={
          name: item,
          type: "line", //形状为柱状图
          itemStyle: {
            color: colorList[index],
          },
          data: this.wasteLChartData.data[index],
        }
        seriesData.push(seriesItem)
      })
      const option = {
        xAxis: {
          type: "category",
          data: this.wasteLChartData.timeSeries,
        },
        legend: {
          data: this.wasteLChartData.keySeries,
          bottom: "0px",
          itemWidth: 8,  // 图标宽度
          itemHeight: 8, // 图标高度
          itemGap: 16,    // 图标之间的间距
          textStyle: {
          fontSize: 10, // 文字大小
         }
        },
        yAxis: {},
        series: seriesData,
        grid: {
          top: 10,
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
      };
      const myChart = echarts.init(document.getElementById("chartBox"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    suninitEchart() {
      const seriesData=[]
      const colorList=['green',"blue","yellow","red"]
      this.rightCharDate.keySeries.map((item,index)=>{
        const seriesItem={
          name: item,
          type: "line", //形状为柱状图
          itemStyle: {
            color: colorList[index],
          },
          data: this.rightCharDate.data[index],
        }
        seriesData.push(seriesItem)
      })
      const option = {
        xAxis: {
          type: "category",
          data: this.rightCharDate.timeSeries,
        },
        legend: {
          data: this.rightCharDate.keySeries,
          bottom: "0px",
          itemWidth: 8,  // 图标宽度
          itemHeight: 8, // 图标高度
          itemGap: 16,    // 图标之间的间距
          textStyle: {
          fontSize: 10, // 文字大小
          }
        },
        yAxis: {},
        series: seriesData,
        grid: {
          top: 10,
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
      };
      const myChart = echarts.init(document.getElementById("chartBox"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .container-header {
    // width: 60%;
    display: flex;
    &-left {
      width: 68%;
      .consumption {
        display: flex;

        .consumption-item {
          width: 20%;
          display: flex;
          align-items: center;
          .consumption-item-img {
            width: 47px;
            margin-right: 15px;
          }
          .consumption-item-title {
            font-size: 10px;
            color: #746060;
          }
          .consumption-item-number {
            font-size: 20px;
          }
        }
      }
      &-buttom {
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
      }
    }
    &-right {
      margin-left: 10px;
      width: 38%;
      &-box {
        margin-top: 10px;
      }
    }
  }
  .container-footer-img {
    display: flex;
  }
}
.card-title{
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
}
.secure {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  //margin-top: 10px;
  .secure-item {
    width: 33%;
    display: flex;
    align-items: center;
    .secure-item-img {
      width: 47px;
      margin-right: 15px;
    }
    .secure-item-title {
      font-size: 15px;
      color: #746060;
    }
    &-box {
      display: flex;
      &-first {
        margin-right: 12px;
      }
      &-text {
        font-size: 12px;
        color: #778899;
        .circle {
          margin-bottom: 2px;
          display: inline-block;
          width: 5px; /* 设置圆点的宽度 */
          height: 5px; /* 设置圆点的高度 */
          background-color: blue; /* 设置圆点的背景颜色 */
          border-radius: 50%; /* 将元素变成一个圆 */
        }
        .redcircle {
          margin-bottom: 2px;
          display: inline-block;
          width: 5px; /* 设置圆点的宽度 */
          height: 5px; /* 设置圆点的高度 */
          background-color: red; /* 设置圆点的背景颜色 */
          border-radius: 50%; /* 将元素变成一个圆 */
        }
      }
    }
    .secure-item-number {
      font-size: 20px;
    }
  }
}
.secure-item-box-number{
  font-weight: bolder;
  font-size: 20px;
}
</style>
